<!--
 * @Descripttion:
 * @Author: xiao li
 * @Date: 2020-07-06 12:17:06
 * @LastEditors: xiao li
 * @LastEditTime: 2023-02-16 14:48:05
-->
<template>
  <div>
    <div
      class="flex-center fill-base"
      :style="{
        paddingTop: o.data.style.whiteSpace / 4 + 'px',
        paddingBottom: o.data.style.whiteSpace / 4 + 'px',
        paddingLeft: o.data.style.wingBlank / 4 + 'px',
        paddingRight: o.data.style.wingBlank / 4 + 'px'
      }"
      v-if="o.data.imagewindowName === 'imagewindow-col-3'"
    >
      <div
        class="img-item"
        style="width: 50%"
        :style="{
          marginTop: o.data.style.whiteSpace / 4 + 'px',
          marginBottom: o.data.style.whiteSpace / 4 + 'px',
          marginRight: o.data.style.wingBlank / 4 + 'px',
          width: 174 + 'px',
          height: 166 + 'px'
        }"
      >
        <img class="img" :src="o.data.imagewindowList[0].img[0].url" />
      </div>
      <div class="flex-center flex-column" style="width: 50%">
        <block v-for="(item, index) in o.data.imagewindowList" :key="index">
          <block v-if="index === 0"></block>
          <div
            v-else
            class="img-item"
            :style="{
              marginTop: o.data.style.whiteSpace / 4 + 'px',
              marginBottom: o.data.style.whiteSpace / 4 + 'px',
              width: 174 + 'px',
              height: 158 / 2 + 'px'
            }"
          >
            <img class="img" :src="item.img[0].url" /></div
        ></block>
      </div>
    </div>
    <div
      v-else
      class="img-box"
      :style="{
        background: o.data.style.backgroundColor,
        paddingLeft: o.data.style.wingBlank / 4 + 'px',
        paddingRight: o.data.style.wingBlank / 4 + 'px'
      }"
    >
      <div
        class="img-item"
        v-for="(item, index) in o.data.imagewindowList"
        :key="index"
        :style="{
          width:
            o.data.imagewindowName === 'imagewindow-col-1'
              ? '100%'
              : 100 / o.data.row.number + '%',
          paddingTop: o.data.style.whiteSpace / 4 + 'px',
          paddingBottom: o.data.style.whiteSpace / 4 + 'px',
          paddingLeft: o.data.style.wingBlank / 4 + 'px',
          paddingRight: o.data.style.wingBlank / 4 + 'px'
        }"
      >
        <img class="img" :src="item.img[0].url" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'imagewindow',
  props: {
    o: Object
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.img-box {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
</style>
